<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>重置密码-ylbnotesHub</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_jiuqmw0ynch.css">
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <script th:src="@{/layui/layui.all.js}"></script>
    <script th:src="@{/js/findjs.js}"></script>

</head>
<body>
<div class="container">

<div class="login-main row">
    <div class="main-content col-12 col-sm-10 col-md-8 col-lg-4">
        <div class="formDiv" id="formDiv">
            <h2 class="text-center">重置密码</h2>
            <form th:action="@{/findpwd}" method="post" id="formBtn" th:object="${registerForm}">
                <div class="dataform">
                    &nbsp;<i class="iconfont icon-denglu">&nbsp;</i>
                    <input id="userName" name="username" type="text" class="layui-input" required placeholder="你的账号"
                           maxlength="64" autocomplete="off" th:field="*{username}">
                    <div class="error-content">
                        &emsp;<span class="errMsg" id="userNameErr2" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></span>
                        <span id="userNameErr" class="errMsg" th:unless="${#fields.hasErrors('username')}"></span>
                    </div>

                    &nbsp;<i class="iconfont icon-mima">&nbsp;</i>
                    <input class="layui-input" type="password" name="password" placeholder="新密码" id="pwd" maxlength="20"
                           required th:field="*{password}">
                    <div class="error-content">
                        &emsp;<span class="errMsg" id="passwordErr2" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></span>
                    </div>

                    &nbsp;<i class="iconfont icon-mima">&nbsp;</i>
                    <input class="layui-input" type="password" name="repassword" placeholder="确认密码" id="repwd" maxlength="20"
                           required th:field="*{repassword}">
                    <div class="error-content">
                        &emsp;<span  class="errMsg" id="passwordErr3" th:if="${#fields.hasErrors('repassword')}" th:errors="*{repassword}"></span>
                        <span  class="errMsg" id="passwordErr" th:unless="${#fields.hasErrors('repassword')}" th:text="${pmsg}"></span>
                    </div>

                    &nbsp;<i class="iconfont icon-youxiang">&nbsp;</i>
                    <input class="layui-input" type="email" name="email"  placeholder="注册邮箱" id="email"
                           required th:field="*{email}">
                    <div class="error-content">
                        &emsp;<span class="errMsg" th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
                        <span class="errMsg" id="emailErr" th:unless="${#fields.hasErrors('email')}" th:text="${emailmsg}"></span>
                    </div>

                    &emsp;&emsp;<div class="layui-input-inline" style="width: 44%">
                    <input type="text" name="verifycode" th:field="*{verifycode}" required id="verifyval" placeholder="验证码" autocomplete="off" class="layui-input">
                </div>&emsp;&emsp;
                    <button type="button" onclick="sendemailcode()" id="btnemail" class="layui-btn layui-btn-radius layui-btn-primary">获取验证码</button>
                    <div class="error-content">
                        &emsp;<span class="errMsg" th:if="${#fields.hasErrors('verifycode')}" th:errors="*{verifycode}"></span>
                        <span class="errMsg" id="verifyErr" th:unless="${#fields.hasErrors('verifycode')}" th:text="${emsg}"></span>
                    </div>
                    <!--&emsp;&emsp;<div class="layui-input-inline">-->
                    <!--<input type="text" name="verifycode" required id="verifyval" placeholder="验证码" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                    <!--<img  onclick="getvCode()" id="verifyimg" style="margin-left: 20px;"/><a href="javascript:void(0);" onclick="getvCode()">&nbsp;换一张</a>-->
                    <!--<div class="error-content">-->
                    <!--&emsp;<span id="verifyErr" class="errMsg" th:text="${vmsg}"></span>-->
                    <!--</div>-->

                    <div class="btn-warp gap">
                        <div class="text-center">
                            <input type="hidden" value="jsform" id="_app">
                            <button type="button" id="btnFind" class="layui-btn layui-btn-radius layui-btn-normal lgbtn">立即申请</button>
                        </div>
                    </div>
                    <div class="error-content">
                        &emsp;<span class="errMsg" th:text="${msg}"></span>
                    </div>
                    <div class="gap">

                        <div class="pull-right" style="margin-top: 6px">
                            <a th:href="@{/toLogin}" class="link">去登录</a>
                        </div>

                    </div>

                    <div class="biggap third-party-title">
                        <h5 class="text-center"><span></span></h5>
                    </div>

                </div>
            </form>
        </div>
    </div>

    <div th:replace="~{common/footer::footer}"></div>
</div>

</div>
<script type="text/javascript">

    // getvCode();

    // $(function () {
    //     $("#userName").blur(function () {
    //         getvCode();
    //     })
    // });

    function sendemailcode() {
        var username = document.getElementById("userName").value;
        var email = document.getElementById("email").value;

        $.ajax({
            url:"sendemailcode",
            type:"POST",
            data:$("#formDiv form").serialize(),
            success:function (data) {
                if(data.code==100){
                    $("#verifyErr").text("信息有误!");
                }else if(data.code==200){
                    $("#verifyErr").text("发送成功 5分钟内有效");
                }
            }
        })
    }

    /**
     * 获取验证码
     * 将验证码写到login.html页面的id = verifyimg 的地方
     */
    // function getvCode() {
    //     document.getElementById("verifyimg").src = timestamp("/verifyCode");
    // }
    // //为url添加时间戳
    // function timestamp(url) {
    //     var uname = document.getElementById("userName").value;
    //     var getTimestamp = new Date().getTime();
    //
    //     if (url.indexOf("?") > -1) {
    //         url = url + "&timestamp=" + getTimestamp + "&username="+uname.trim()
    //     } else {
    //         url = url + "?timestamp=" + getTimestamp + "&username="+uname.trim()
    //     }
    //     return url;
    // };


</script>
</body>
</html>